<template>
  <div class="settings-container">
    <h2>AI模型配置</h2>
    
    <!-- 模型提供方选择 -->
    <div class="section">
      <h3>选择模型提供方</h3>
      <select v-model="selectedProvider" class="provider-select">
        <option value="openai">OpenAI API</option>
        <option value="ollama">Ollama API</option>
      </select>
    </div>

    <!-- OpenAI配置 -->
    <div v-if="selectedProvider === 'openai'" class="section">
      <h3>OpenAI 配置</h3>
      <div class="form-group">
        <label>API Key</label>
        <input
          type="password"
          v-model="openaiConfig.apiKey"
          placeholder="请输入OpenAI API Key"
        />
      </div>
      <div class="form-group">
        <label>模型选择</label>
        <select v-model="openaiConfig.model">
          <option value="gpt-4">GPT-4</option>
          <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
        </select>
      </div>
      <div class="form-group">
        <label>温度 ({{ openaiConfig.temperature }})</label>
        <input
          type="range"
          v-model="openaiConfig.temperature"
          min="0"
          max="2"
          step="0.1"
        />
      </div>
    </div>

    <!-- Ollama配置 -->
    <div v-if="selectedProvider === 'ollama'" class="section">
      <h3>Ollama 配置</h3>
      <div class="form-group">
        <label>服务地址</label>
        <input
          type="text"
          v-model="ollamaConfig.serverUrl"
          placeholder="http://localhost:11434"
        />
      </div>
      <div class="form-group">
        <label>选择模型</label>
        <select v-model="ollamaConfig.model">
          <option v-for="model in availableOllamaModels" :key="model" :value="model.name">
            {{ model.name }}
          </option>
        </select>
        <button @click="fetchOllamaModels" class="refresh-button">刷新模型列表</button>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="actions">
      <button @click="testConnection" class="test-button">测试连接</button>
      <button @click="saveConfig" class="save-button">保存配置</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ModelConfig } from '@/utils/modelConfig'

// 状态定义
const selectedProvider = ref('openai')

// OpenAI配置
const openaiConfig = ref({
  apiKey: '',
  model: 'gpt-3.5-turbo',
  temperature: 0.7
})

// Ollama配置
const ollamaConfig = ref({
  serverUrl: 'http://localhost:11434',
  model: ''
})
const availableOllamaModels = ref([])

// 获取Ollama可用模型列表
const fetchOllamaModels = async () => {
  try {
    const response = await fetch(`${ollamaConfig.value.serverUrl}/api/tags`)
    const data = await response.json()
    availableOllamaModels.value = data.models || []
  } catch (error) {
    console.error('获取Ollama模型列表失败:', error)
    // TODO: 添加错误提示
  }
}

// 测试连接
const testConnection = async () => {
  try {
    if (selectedProvider.value === 'openai') {
      // 测试OpenAI连接
      const response = await fetch('https://api.openai.com/v1/models', {
        headers: {
          'Authorization': `Bearer ${openaiConfig.value.apiKey}`
        }
      })
      if (response.ok) {
        alert('OpenAI连接成功！')
      } else {
        throw new Error('API密钥无效')
      }
    } else {
      // 测试Ollama连接
      const response = await fetch(`${ollamaConfig.value.serverUrl}/api/tags`)
      if (response.ok) {
        alert('Ollama连接成功！')
      } else {
        throw new Error('无法连接到Ollama服务')
      }
    }
  } catch (error) {
    alert(`连接测试失败: ${error.message}`)
  }
}

// 保存配置
const saveConfig = () => {
  const config = {
    provider: selectedProvider.value,
    openai: openaiConfig.value,
    ollama: ollamaConfig.value
  }
  if (ModelConfig.saveConfig(config)) {
    alert('配置已保存')
  } else {
    alert('配置保存失败')
  }
}

// 加载已保存的配置
const loadConfig = () => {
  const config = ModelConfig.getConfig()
  selectedProvider.value = config.provider
  openaiConfig.value = config.openai
  ollamaConfig.value = config.ollama
}

onMounted(() => {
  loadConfig()
  if (selectedProvider.value === 'ollama') {
    fetchOllamaModels()
  }
})
</script>

<style scoped>
.settings-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.section {
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-bottom: 20px;
  color: #333;
}

h3 {
  margin-bottom: 15px;
  color: #666;
}

.provider-select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-group input[type="range"] {
  width: 100%;
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.test-button {
  background-color: #4CAF50;
  color: white;
}

.save-button {
  background-color: #2196F3;
  color: white;
}

.refresh-button {
  background-color: #FF9800;
  color: white;
  margin-top: 10px;
}

button:hover {
  opacity: 0.9;
}
</style>
